{% extends "base.html" %}

{% block title %}教师课程管理 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .courses-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    .section {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
    }
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .filter-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .form-group {
        margin-bottom: 0;
    }
    .form-label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #495057;
    }
    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        font-size: 1rem;
        line-height: 1.5;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .form-control:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    .btn {
        display: inline-block;
        padding: 0.5rem 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        font-size: 1rem;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }
    .btn-primary {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #004085;
    }
    .btn-secondary {
        background-color: #6c757d;
        color: white;
        border-color: #6c757d;
    }
    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
    }
    .btn-outline-primary {
        color: #007bff;
        border-color: #007bff;
        background-color: white;
    }
    .btn-outline-primary:hover {
        background-color: #007bff;
        color: white;
    }
    .btn-outline-secondary {
        color: #6c757d;
        border-color: #6c757d;
        background-color: white;
    }
    .btn-outline-secondary:hover {
        background-color: #6c757d;
        color: white;
    }
    .btn-danger {
        background-color: #dc3545;
        color: white;
        border-color: #dc3545;
    }
    .btn-danger:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }
    .btn-outline-danger {
        color: #dc3545;
        border-color: #dc3545;
        background-color: white;
    }
    .btn-outline-danger:hover {
        background-color: #dc3545;
        color: white;
    }
    .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1.5rem;
    }
    .table th,
    .table td {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid #dee2e6;
        white-space: nowrap;
    }
    .table th {
        background-color: #f8f9fa;
        font-weight: 600;
        color: #495057;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .table tr:hover {
        background-color: #f8f9fa;
    }
    .table-container {
        overflow-x: auto;
        margin-bottom: 1.5rem;
    }
    .badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
    }
    .badge-active {
        background-color: #28a745;
        color: white;
    }
    .badge-ended {
        background-color: #6c757d;
        color: white;
    }
    .badge-upcoming {
        background-color: #007bff;
        color: white;
    }
    .chart-container {
        height: 400px;
        margin-bottom: 1.5rem;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .stat-card {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 1.5rem;
        text-align: center;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #007bff;
        margin-bottom: 0.5rem;
    }
    .stat-label {
        font-size: 0.875rem;
        color: #6c757d;
    }
    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }
    .pagination-item {
        margin: 0 0.25rem;
    }
    .pagination-link {
        display: inline-block;
        padding: 0.5rem 0.75rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        text-decoration: none;
        color: #007bff;
        transition: all 0.15s ease-in-out;
    }
    .pagination-link:hover {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }
    .pagination-link.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    /* 标签页导航 */
    .tab-container {
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 2rem;
    }
    .tabs {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tab {
        margin-bottom: -1px;
    }
    .tab-link {
        display: block;
        padding: 1rem 1.5rem;
        text-decoration: none;
        color: #6c757d;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        transition: all 0.2s;
    }
    .tab-link:hover {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #495057;
    }
    .tab-link.active {
        background-color: white;
        border-color: #dee2e6 #dee2e6 white;
        color: #495057;
        font-weight: 600;
    }
    .tab-content {
        margin-bottom: 2rem;
    }
    .tab-pane {
        display: none;
    }
    .tab-pane.active {
        display: block;
    }
    /* 课程卡片 */
    .courses-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .course-card {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .course-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .course-card-header {
        background-color: #f8f9fa;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .course-card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #495057;
        margin: 0;
    }
    .course-card-content {
        padding: 1.5rem;
        flex-grow: 1;
    }
    .course-info {
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #6c757d;
        font-size: 0.9rem;
    }
    .course-info i {
        color: #007bff;
    }
    .course-card-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .course-stats {
        display: flex;
        gap: 1rem;
    }
    .course-stat {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        color: #6c757d;
        font-size: 0.875rem;
    }
    .course-actions {
        display: flex;
        gap: 0.5rem;
    }
    /* 课程详情模态框 */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
        transition: opacity 0.3s ease;
    }
    .modal-content {
        background-color: white;
        margin: 5% auto;
        padding: 2rem;
        border-radius: 0.5rem;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        max-width: 800px;
        width: 90%;
        animation-name: modalSlideDown;
        animation-duration: 0.3s;
    }
    @keyframes modalSlideDown {
        from {
            transform: translateY(-50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .modal-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        margin: 0;
    }
    .close-modal {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #6c757d;
    }
    .close-modal:hover {
        color: #495057;
    }
    /* 响应式设计 */
    @media (max-width: 768px) {
        .courses-container {
            padding: 0 1rem;
        }
        .section {
            padding: 1.5rem 1rem;
        }
        .section-header {
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
        }
        .filter-container {
            flex-direction: column;
        }
        .stats-grid {
            grid-template-columns: 1fr;
        }
        .tabs {
            overflow-x: auto;
        }
        .tab-link {
            white-space: nowrap;
        }
        .courses-grid {
            grid-template-columns: 1fr;
        }
        .modal-content {
            margin: 10% auto;
            padding: 1.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-book mr-2 text-primary"></i>教师课程管理
    </h1>
    <p class="text-gray-600">管理您负责的课程，查看课程信息和学生情况</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="courses-container">
    <!-- 标签页导航 -->
    <div class="tab-container">
        <ul class="tabs">
            <li class="tab"><a href="#courses-overview" class="tab-link active" data-toggle="tab">课程概览</a></li>
            <li class="tab"><a href="#current-courses" class="tab-link" data-toggle="tab">当前课程</a></li>
            <li class="tab"><a href="#past-courses" class="tab-link" data-toggle="tab">已结束课程</a></li>
            <li class="tab"><a href="#upcoming-courses" class="tab-link" data-toggle="tab">即将开始课程</a></li>
            <li class="tab"><a href="#course-analytics" class="tab-link" data-toggle="tab">课程分析</a></li>
        </ul>
    </div>
    
    <!-- 标签页内容 -->
    <div class="tab-content">
        <!-- 课程概览标签页 -->
        <div id="courses-overview" class="tab-pane active">
            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-value">5</div>
                    <div class="stat-label">当前课程数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">180</div>
                    <div class="stat-label">学生总数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">4</div>
                    <div class="stat-label">已结束课程</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">2</div>
                    <div class="stat-label">即将开始课程</div>
                </div>
            </div>
            
            <!-- 近期课程 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-calendar-alt text-primary"></i>
                        今日课程
                    </h2>
                </div>
                <div class="courses-grid">
                    <div class="course-card">
                        <div class="course-card-header">
                            <h3 class="course-card-title">人工智能导论</h3>
                            <span class="badge badge-active">进行中</span>
                        </div>
                        <div class="course-card-content">
                            <div class="course-info">
                                <i class="fa fa-users"></i>
                                <span>计算机科学与技术2021级1班</span>
                            </div>
                            <div class="course-info">
                                <i class="fa fa-clock"></i>
                                <span>14:00 - 16:00</span>
                            </div>
                            <div class="course-info">
                                <i class="fa fa-map-marker"></i>
                                <span>实验楼B201</span>
                            </div>
                            <div class="course-info">
                                <i class="fa fa-users"></i>
                                <span>45名学生</span>
                            </div>
                        </div>
                        <div class="course-card-footer">
                            <div class="course-actions">
                                <button class="btn btn-sm btn-outline-primary view-course">查看详情</button>
                                <button class="btn btn-sm btn-outline-secondary start-attendance">开始签到</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="course-card">
                        <div class="course-card-header">
                            <h3 class="course-card-title">机器学习</h3>
                            <span class="badge badge-active">进行中</span>
                        </div>
                        <div class="course-card-content">
                            <div class="course-info">
                                <i class="fa fa-users"></i>
                                <span>计算机科学与技术2021级2班</span>
                            </div>
                            <div class="course-info">
                                <i class="fa fa-clock"></i>
                                <span>16:30 - 18:30</span>
                            </div>
                            <div class="course-info">
                                <i class="fa fa-map-marker"></i>
                                <span>教学楼A305</span>
                            </div>
                            <div class="course-info">
                                <i class="fa fa-users"></i>
                                <span>40名学生</span>
                            </div>
                        </div>
                        <div class="course-card-footer">
                            <div class="course-actions">
                                <button class="btn btn-sm btn-outline-primary view-course">查看详情</button>
                                <button class="btn btn-sm btn-outline-secondary start-attendance">开始签到</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 课程活跃度图表 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-chart-line text-primary"></i>
                        课程活跃度分析
                    </h2>
                </div>
                <div class="chart-container" id="course-activity-chart"></div>
            </div>
        </div>
        
        <!-- 当前课程标签页 -->
        <div id="current-courses" class="tab-pane">
            <!-- 筛选条件 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-filter text-primary"></i>
                        筛选条件
                    </h2>
                </div>
                <div class="filter-container">
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="course-name-filter" class="form-label">课程名称</label>
                        <input type="text" id="course-name-filter" class="form-control" placeholder="输入课程名称">
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="course-semester-filter" class="form-label">学期</label>
                        <select id="course-semester-filter" class="form-control">
                            <option value="all">全部学期</option>
                            <option value="2024-2025-1" selected>2024-2025学年第1学期</option>
                            <option value="2023-2024-2">2023-2024学年第2学期</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="course-status-filter" class="form-label">状态</label>
                        <select id="course-status-filter" class="form-control">
                            <option value="active" selected>进行中</option>
                            <option value="ended">已结束</option>
                            <option value="upcoming">即将开始</option>
                        </select>
                    </div>
                    <div class="form-group" style="align-self: flex-end;">
                        <button class="btn btn-primary w-100">查询</button>
                    </div>
                </div>
            </div>
            
            <!-- 课程列表 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-list text-primary"></i>
                        当前课程列表
                    </h2>
                    <div>
                        <button class="btn btn-outline-secondary" id="export-courses-btn">
                            <i class="fa fa-download mr-1"></i>导出课程信息
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>课程名称</th>
                                <th>课程代码</th>
                                <th>班级</th>
                                <th>学期</th>
                                <th>周数</th>
                                <th>上课时间</th>
                                <th>上课地点</th>
                                <th>学生人数</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>人工智能导论</td>
                                <td>CS301</td>
                                <td>计算机科学与技术2021级1班</td>
                                <td>2024-2025学年第1学期</td>
                                <td>1-18周</td>
                                <td>周二 3-4节，周四 5-6节</td>
                                <td>实验楼B201，教学楼A301</td>
                                <td>45</td>
                                <td><span class="badge badge-active">进行中</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">课程详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">学生管理</button>
                                    <button class="btn btn-sm btn-outline-primary">开始签到</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>人工智能导论</td>
                                <td>CS301</td>
                                <td>计算机科学与技术2021级3班</td>
                                <td>2024-2025学年第1学期</td>
                                <td>1-18周</td>
                                <td>周一 1-2节，周三 3-4节</td>
                                <td>教学楼A303，实验楼B202</td>
                                <td>42</td>
                                <td><span class="badge badge-active">进行中</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">课程详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">学生管理</button>
                                    <button class="btn btn-sm btn-outline-primary">开始签到</button>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>机器学习</td>
                                <td>CS402</td>
                                <td>计算机科学与技术2021级2班</td>
                                <td>2024-2025学年第1学期</td>
                                <td>1-18周</td>
                                <td>周二 5-6节，周四 3-4节</td>
                                <td>教学楼A305，实验楼B301</td>
                                <td>40</td>
                                <td><span class="badge badge-active">进行中</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">课程详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">学生管理</button>
                                    <button class="btn btn-sm btn-outline-primary">开始签到</button>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>数据结构</td>
                                <td>CS202</td>
                                <td>计算机科学与技术2022级1班</td>
                                <td>2024-2025学年第1学期</td>
                                <td>1-18周</td>
                                <td>周三 1-2节，周五 3-4节</td>
                                <td>教学楼A201，实验楼B101</td>
                                <td>43</td>
                                <td><span class="badge badge-active">进行中</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">课程详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">学生管理</button>
                                    <button class="btn btn-sm btn-outline-primary">开始签到</button>
                                </td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>计算机网络</td>
                                <td>CS204</td>
                                <td>计算机科学与技术2022级2班</td>
                                <td>2024-2025学年第1学期</td>
                                <td>1-18周</td>
                                <td>周一 3-4节，周五 1-2节</td>
                                <td>教学楼A203，实验楼B102</td>
                                <td>40</td>
                                <td><span class="badge badge-active">进行中</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">课程详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">学生管理</button>
                                    <button class="btn btn-sm btn-outline-primary">开始签到</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页控制 -->
                <div class="pagination">
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&laquo;</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link active">1</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">2</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">3</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&raquo;</a>
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 已结束课程标签页 -->
        <div id="past-courses" class="tab-pane">
            <!-- 筛选条件 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-filter text-primary"></i>
                        筛选条件
                    </h2>
                </div>
                <div class="filter-container">
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="past-course-name-filter" class="form-label">课程名称</label>
                        <input type="text" id="past-course-name-filter" class="form-control" placeholder="输入课程名称">
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="past-course-semester-filter" class="form-label">学期</label>
                        <select id="past-course-semester-filter" class="form-control">
                            <option value="all">全部学期</option>
                            <option value="2023-2024-2">2023-2024学年第2学期</option>
                            <option value="2023-2024-1">2023-2024学年第1学期</option>
                            <option value="2022-2023-2">2022-2023学年第2学期</option>
                        </select>
                    </div>
                    <div class="form-group" style="align-self: flex-end;">
                        <button class="btn btn-primary w-100">查询</button>
                    </div>
                </div>
            </div>
            
            <!-- 课程列表 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-list text-primary"></i>
                        已结束课程列表
                    </h2>
                    <div>
                        <button class="btn btn-outline-secondary" id="export-past-courses-btn">
                            <i class="fa fa-download mr-1"></i>导出课程信息
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>课程名称</th>
                                <th>课程代码</th>
                                <th>班级</th>
                                <th>学期</th>
                                <th>学生人数</th>
                                <th>平均成绩</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>人工智能基础</td>
                                <td>CS105</td>
                                <td>计算机科学与技术2021级1班</td>
                                <td>2023-2024学年第2学期</td>
                                <td>45</td>
                                <td>85.5</td>
                                <td><span class="badge badge-ended">已结束</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">课程详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">成绩管理</button>
                                    <button class="btn btn-sm btn-outline-secondary">导出报告</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>算法设计与分析</td>
                                <td>CS205</td>
                                <td>计算机科学与技术2021级2班</td>
                                <td>2023-2024学年第2学期</td>
                                <td>40</td>
                                <td>82.0</td>
                                <td><span class="badge badge-ended">已结束</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">课程详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">成绩管理</button>
                                    <button class="btn btn-sm btn-outline-secondary">导出报告</button>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>数据库原理</td>
                                <td>CS305</td>
                                <td>计算机科学与技术2021级3班</td>
                                <td>2023-2024学年第1学期</td>
                                <td>42</td>
                                <td>87.2</td>
                                <td><span class="badge badge-ended">已结束</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">课程详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">成绩管理</button>
                                    <button class="btn btn-sm btn-outline-secondary">导出报告</button>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>操作系统</td>
                                <td>CS306</td>
                                <td>计算机科学与技术2021级1班</td>
                                <td>2023-2024学年第1学期</td>
                                <td>45</td>
                                <td>83.8</td>
                                <td><span class="badge badge-ended">已结束</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">课程详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">成绩管理</button>
                                    <button class="btn btn-sm btn-outline-secondary">导出报告</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页控制 -->
                <div class="pagination">
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&laquo;</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link active">1</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">2</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&raquo;</a>
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 即将开始课程标签页 -->
        <div id="upcoming-courses" class="tab-pane">
            <!-- 课程列表 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-list text-primary"></i>
                        即将开始课程列表
                    </h2>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>课程名称</th>
                                <th>课程代码</th>
                                <th>班级</th>
                                <th>学期</th>
                                <th>开始时间</th>
                                <th>周数</th>
                                <th>上课时间</th>
                                <th>上课地点</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>深度学习</td>
                                <td>CS405</td>
                                <td>计算机科学与技术2021级1班</td>
                                <td>2024-2025学年第2学期</td>
                                <td>2025-02-24</td>
                                <td>1-18周</td>
                                <td>周二 1-2节，周四 5-6节</td>
                                <td>实验楼B301，教学楼A401</td>
                                <td><span class="badge badge-upcoming">即将开始</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">课程详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">课程准备</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>计算机视觉</td>
                                <td>CS406</td>
                                <td>计算机科学与技术2021级2班</td>
                                <td>2024-2025学年第2学期</td>
                                <td>2025-02-24</td>
                                <td>1-18周</td>
                                <td>周一 5-6节，周三 3-4节</td>
                                <td>实验楼B302，教学楼A402</td>
                                <td><span class="badge badge-upcoming">即将开始</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">课程详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">课程准备</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 课程分析标签页 -->
        <div id="course-analytics" class="tab-pane">
            <!-- 筛选条件 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-filter text-primary"></i>
                        选择分析条件
                    </h2>
                </div>
                <div class="filter-container">
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="analytics-course" class="form-label">选择课程</label>
                        <select id="analytics-course" class="form-control">
                            <option value="CS301">人工智能导论</option>
                            <option value="CS402">机器学习</option>
                            <option value="CS202">数据结构</option>
                            <option value="CS204">计算机网络</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="analytics-semester" class="form-label">学期</label>
                        <select id="analytics-semester" class="form-control">
                            <option value="2024-2025-1" selected>2024-2025学年第1学期</option>
                            <option value="2023-2024-2">2023-2024学年第2学期</option>
                            <option value="2023-2024-1">2023-2024学年第1学期</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="analytics-type" class="form-label">分析类型</label>
                        <select id="analytics-type" class="form-control">
                            <option value="attendance">出勤率分析</option>
                            <option value="performance">成绩分析</option>
                            <option value="engagement">学生参与度</option>
                            <option value="progress">学习进度</option>
                        </select>
                    </div>
                    <div class="form-group" style="align-self: flex-end;">
                        <button class="btn btn-primary w-100" id="generate-analytics-btn">生成分析</button>
                    </div>
                </div>
            </div>
            
            <!-- 分析结果 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-chart-bar text-primary"></i>
                        课程分析结果
                    </h2>
                    <div>
                        <button class="btn btn-outline-secondary" id="export-analytics-btn">
                            <i class="fa fa-download mr-1"></i>导出分析报告
                        </button>
                    </div>
                </div>
                
                <!-- 图表区域 -->
                <div class="chart-container" id="analytics-chart"></div>
                
                <!-- 关键指标 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-value">89.2%</div>
                        <div class="stat-label">平均出勤率</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">85.5</div>
                        <div class="stat-label">平均成绩</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">78.3%</div>
                        <div class="stat-label">作业完成率</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">65.7%</div>
                        <div class="stat-label">课堂参与度</div>
                    </div>
                </div>
                
                <!-- 分析总结 -->
                <div class="mb-4">
                    <h3 class="h5 font-weight-bold mb-2">分析总结</h3>
                    <div class="bg-light p-4 rounded">
                        <p class="mb-2">1. 出勤率总体良好，但部分学生存在迟到现象，建议加强考勤管理。</p>
                        <p class="mb-2">2. 学生成绩分布较为合理，高分段和低分段人数较少，中间段人数较多。</p>
                        <p class="mb-2">3. 作业完成率较高，但质量参差不齐，需要加强对学习困难学生的辅导。</p>
                        <p>4. 课堂参与度有待提高，建议增加互动环节，提高学生的学习积极性。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 课程详情模态框 -->
<div id="course-detail-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">课程详情</h2>
            <button class="close-modal" id="close-modal-btn">&times;</button>
        </div>
        <div class="modal-body">
            <!-- 模态框内容将通过JavaScript动态添加 -->
            <div class="text-center text-gray-500 py-4">
                加载课程详情...
            </div>
        </div>
        <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 1rem; padding-top: 1rem;">
            <button class="btn btn-secondary" id="close-modal-footer-btn">关闭</button>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 获取DOM元素
    const tabLinks = document.querySelectorAll('.tab-link');
    const tabPanes = document.querySelectorAll('.tab-pane');
    const exportCoursesBtn = document.getElementById('export-courses-btn');
    const exportPastCoursesBtn = document.getElementById('export-past-courses-btn');
    const generateAnalyticsBtn = document.getElementById('generate-analytics-btn');
    const exportAnalyticsBtn = document.getElementById('export-analytics-btn');
    const courseDetailModal = document.getElementById('course-detail-modal');
    const closeModalBtn = document.getElementById('close-modal-btn');
    const closeModalFooterBtn = document.getElementById('close-modal-footer-btn');
    const viewCourseButtons = document.querySelectorAll('.view-course');
    const startAttendanceButtons = document.querySelectorAll('.start-attendance');
    
    // 标签页切换功能
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有标签页的活动状态
            tabLinks.forEach(l => l.classList.remove('active'));
            tabPanes.forEach(p => p.classList.remove('active'));
            
            // 为当前点击的标签页添加活动状态
            this.classList.add('active');
            
            // 显示对应的标签页内容
            const targetId = this.getAttribute('href').substring(1);
            const targetPane = document.getElementById(targetId);
            if (targetPane) {
                targetPane.classList.add('active');
            }
            
            // 添加切换动画效果
            tabPanes.forEach(pane => {
                if (pane.classList.contains('active')) {
                    pane.style.opacity = '0';
                    pane.style.transform = 'translateY(10px)';
                    pane.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                    
                    setTimeout(() => {
                        pane.style.opacity = '1';
                        pane.style.transform = 'translateY(0)';
                    }, 50);
                }
            });
        });
    });
    
    // 导出课程信息
    exportCoursesBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该调用导出功能
        alert('课程信息导出功能将在后续版本中实现');
    });
    
    // 导出已结束课程信息
    exportPastCoursesBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该调用导出功能
        alert('已结束课程信息导出功能将在后续版本中实现');
    });
    
    // 生成课程分析
    generateAnalyticsBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该调用生成分析功能
        // 这里只是模拟图表的存在
        const analyticsChart = document.getElementById('analytics-chart');
        if (analyticsChart) {
            analyticsChart.innerHTML = `
                <div style="height: 100%; display: flex; align-items: center; justify-content: center;">
                    <div style="text-align: center;">
                        <i class="fa fa-chart-bar text-primary" style="font-size: 4rem; opacity: 0.3;"></i>
                        <p style="margin-top: 1rem; color: #6c757d;">课程分析图表将在这里显示</p>
                    </div>
                </div>
            `;
        }
    });
    
    // 导出分析报告
    exportAnalyticsBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该调用导出功能
        alert('分析报告导出功能将在后续版本中实现');
    });
    
    // 打开课程详情模态框
    function openCourseDetailModal() {
        // 在实际应用中，这里应该从服务器获取课程详情
        const modalBody = courseDetailModal.querySelector('.modal-body');
        modalBody.innerHTML = `
            <div class="mb-4">
                <h3 class="h4 font-weight-bold mb-2">人工智能导论</h3>
                <p class="text-gray-600">课程代码: CS301 | 学分: 3 | 学时: 48</p>
            </div>
            <div class="mb-4">
                <h4 class="h5 font-weight-bold mb-2">课程信息</h4>
                <div class="row mb-2">
                    <div class="col-sm-3 text-gray-600">开课学期:</div>
                    <div class="col-sm-9">2024-2025学年第1学期</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-3 text-gray-600">授课班级:</div>
                    <div class="col-sm-9">计算机科学与技术2021级1班</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-3 text-gray-600">上课时间:</div>
                    <div class="col-sm-9">周二 3-4节，周四 5-6节</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-3 text-gray-600">上课地点:</div>
                    <div class="col-sm-9">实验楼B201，教学楼A301</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-3 text-gray-600">学生人数:</div>
                    <div class="col-sm-9">45人</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-3 text-gray-600">课程状态:</div>
                    <div class="col-sm-9"><span class="badge badge-active">进行中</span></div>
                </div>
            </div>
            <div class="mb-4">
                <h4 class="h5 font-weight-bold mb-2">课程简介</h4>
                <p class="text-gray-700">
                    本课程介绍人工智能的基本概念、原理和方法，包括知识表示、搜索策略、推理方法、机器学习、神经网络等内容。
                    课程注重理论与实践相结合，通过编程实践加深对人工智能算法的理解和应用能力。
                </p>
            </div>
            <div class="mb-4">
                <h4 class="h5 font-weight-bold mb-2">教学目标</h4>
                <ol class="list-decimal pl-5 text-gray-700">
                    <li>掌握人工智能的基本概念和原理</li>
                    <li>了解人工智能的主要研究领域和应用场景</li>
                    <li>掌握常用的人工智能算法和技术</li>
                    <li>具备运用人工智能技术解决实际问题的能力</li>
                </ol>
            </div>
        `;
        
        // 显示模态框
        courseDetailModal.style.display = 'block';
    }
    
    // 关闭课程详情模态框
    function closeCourseDetailModal() {
        courseDetailModal.style.display = 'none';
    }
    
    // 为查看课程详情按钮添加事件监听
    viewCourseButtons.forEach(button => {
        button.addEventListener('click', openCourseDetailModal);
    });
    
    // 为模态框关闭按钮添加事件监听
    closeModalBtn.addEventListener('click', closeCourseDetailModal);
    closeModalFooterBtn.addEventListener('click', closeCourseDetailModal);
    
    // 点击模态框外部关闭模态框
    window.addEventListener('click', function(event) {
        if (event.target === courseDetailModal) {
            closeCourseDetailModal();
        }
    });
    
    // 开始签到按钮点击事件
    startAttendanceButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 在实际应用中，这里应该跳转到签到页面或打开签到模态框
            alert('签到功能将在后续版本中实现');
        });
    });
    
    // 页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        // 为统计卡片添加动画
        const statCards = document.querySelectorAll('.stat-card');
        statCards.forEach((card, index) => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = `opacity 0.5s ease ${300 + index * 100}ms, transform 0.5s ease ${300 + index * 100}ms`;
            
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 300 + index * 100);
        });
        
        // 为课程卡片添加动画
        const courseCards = document.querySelectorAll('.course-card');
        courseCards.forEach((card, index) => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = `opacity 0.5s ease ${600 + index * 150}ms, transform 0.5s ease ${600 + index * 150}ms`;
            
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 600 + index * 150);
        });
        
        // 为表格添加动画
        const tables = document.querySelectorAll('.table');
        tables.forEach((table, index) => {
            table.style.opacity = '0';
            table.style.transition = `opacity 0.5s ease ${800 + index * 200}ms`;
            
            setTimeout(() => {
                table.style.opacity = '1';
            }, 800 + index * 200);
        });
        
        // 为按钮添加悬停效果
        const buttons = document.querySelectorAll('.btn');
        buttons.forEach(button => {
            button.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-1px)';
                this.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
                this.style.transition = 'transform 0.2s ease, box-shadow 0.2s ease';
            });
            
            button.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = 'none';
            });
        });
        
        // 如果是课程概览页面，初始化图表
        const activeTab = document.querySelector('.tab-pane.active');
        if (activeTab && activeTab.id === 'courses-overview') {
            // 在实际应用中，这里应该使用Chart.js等库初始化图表
            // 这里只是模拟图表的存在
            const courseActivityChart = document.getElementById('course-activity-chart');
            if (courseActivityChart) {
                courseActivityChart.innerHTML = `
                    <div style="height: 100%; display: flex; align-items: center; justify-content: center;">
                        <div style="text-align: center;">
                            <i class="fa fa-chart-line text-primary" style="font-size: 4rem; opacity: 0.3;"></i>
                            <p style="margin-top: 1rem; color: #6c757d;">课程活跃度图表将在这里显示</p>
                        </div>
                    </div>
                `;
            }
        }
    });
</script>
{% endblock %}